<template>
	<view class="register">

		<view class="register-plate-1">
			<view class="logo">
				<image src="../../../static/home-logo.png" mode="widthFix"></image>
			</view>
			<!-- 头像 -->
			<image :src="avatar" mode=""></image>
			<!-- 昵称 -->
			<text>{{nickName}}</text>
			<!-- 描述 -->
			<view class="desc">
				您的好友邀请您成为翡翠有品会员
			</view>
		</view>
		<view class="register-plate-2">
			<button class="bg-btn" lang="zh_CN" open-type="getUserInfo"  @getuserinfo="wxOnLogin">手机一键登录</button>
			<text @click="protocolShow = true">登录即代表同意《翡翠有品用户协议》</text>
		</view>
		<!-- 弹窗区域 -->
		<u-popup mode="center" v-model="protocolShow" border-radius="20">
			<view class="protoco-box">
				<view class="title">
					{{title}}
				</view>
				<scroll-view class="content" scroll-y="true">
					<u-parse :html="protocol"></u-parse>
				</scroll-view>
			</view>
		</u-popup>
		<u-popup mode="center" v-model="mobileShow"  border-radius="20" >
			<view class="auth-box">
				<view class="box-top">
					<view class="box-title">
						您还未绑定手机号
					</view>
					<view class="box-content">
						您需要绑定手机号来同步其他应用信息
					</view>
				</view>
				<view class="button-box">
					<button class="bg-btn" lang="zh_CN" open-type="getPhoneNumber"   @getphonenumber="getPhoneNumber">立即绑定</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import IM from '../../../static/js/IM.js'
	export default {
		data() {
			return {
				title:'',
				protocol:'',
				protocolShow:false,
				avatar:'',//邀请人头像
				nickName:'',//邀请人昵称
				roomId:'',
				is_token:false,
				authShow:false,
				mobileShow:false,
				key:''
			};
		},
		onLoad(option) {
			console.log('接收到了参数')
			console.log(option)
			this.avatar = option.avatar
			this.nickName = option.nickName
			this.roomId = option.roomId
		},
		created() {
			this.getUserProtocol()
		},
		methods:{
			// 返回上一个页面
			onBack(){
				uni.redirectTo({
					url:'../liveRoom?id=' + this.roomId
				})
			},
			// 绑定手机号
			getPhoneNumber(e){
				let user_data = uni.getStorageSync('user_info')
				uni.request({
				    url:this.$Url +'/index.php/app/Users/bind_mobile',
				    method:'POST',
				    data:{
					   iv:e.detail.iv,
					   encryptedData:e.detail.encryptedData,
					   key:this.key,
					   avatarUrl:user_data.avatarUrl,
					   gender:user_data.gender,
					   nickName:user_data.nickName,
					   openId:user_data.openId,
					   unionId:user_data.unionId
				    },
				    success: (res) => {
						if (res.data.status == 200) {
							uni.setStorageSync('token',res.data.data.token)
							uni.setStorageSync('im_account',res.data.data.im_account)
							uni.setStorageSync('im_sig',res.data.data.im_sig)
							uni.showToast({
								title:'绑定成功',
								duration:1200
							})
							IM.getIM()
							this.mobileShow = false
							this.is_token = true
							uni.setStorageSync('go_login',2)
							this.onBack()
						} else{
							uni.showToast({
								title:res.data.msg,
								icon:'none',
								duration:1200
							})
						}
				    }
				})
			},
			
			//微信授权
			wxOnLogin() {
				uni.getProvider({
					service: 'oauth',
					success: (res) => {
						if (~res.provider.indexOf('weixin')) {
							uni.login({
								provider: 'weixin',
								success: (res2) => {
									uni.getUserInfo({
										provider: 'weixin',
										success: (info) => {
											uni.request({
												url: this.$Url + '/index.php/app/Users/wx_info',
												method: 'POST',
												data: {
													encryptedData: info.encryptedData,
													iv: info.iv,
													code: res2.code
												},
												success: (res3) => {
													if (res3.data.status == 202) { //绑定手机号
														this.key = res3.data.data.key
														uni.showToast({
															title:'授权成功，您需要绑定手机号码来同步其他应用',
															icon:'none',
															duration:1200
														})
														uni.setStorageSync('user_info', res3.data.data.user_info)
														uni.setStorageSync('openId',res3.data.data.user_info.openId)
														uni.request({
															url: 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=wxea78a3ff3edfee6d' +
															// url: 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=wx4c1d59dc04df06a7' +
																'&secret=af18d47a333dc792be40a1151dcac2ba',
																// '&secret=b76d3a00dbbd57fbcb27ba5e5dbfe653',
															method: 'POST',
															success: (res4) => {
																uni.setStorageSync('access_token', res4.data.access_token)
															}
														})
														setTimeout(()=>{
															this.authShow = false
															this.mobileShow = true
														},1200)
													} else if(res3.data.status == 200){ //已绑定手机号直接授权成功
														uni.showToast({
															title: '授权成功'
														})
														uni.setStorageSync('go_login',2)
														uni.setStorageSync('userInfo', res3.data.data.user_info)
														uni.setStorageSync('token',res3.data.data.token)
														uni.setStorageSync('im_account',res3.data.data.im_account)
														uni.setStorageSync('im_sig',res3.data.data.im_sig)
														uni.setStorageSync('openId',res3.data.data.user_info.openId)
														uni.request({
															url: 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=wxea78a3ff3edfee6d' +
															// url: 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=wx4c1d59dc04df06a7' +
																'&secret=af18d47a333dc792be40a1151dcac2ba',
																// '&secret=b76d3a00dbbd57fbcb27ba5e5dbfe653',
															method: 'POST',
															success: (res4) => {
																uni.setStorageSync('access_token', res4.data.access_token)
															}
														})
														IM.getIM()
														this.is_token = true
														this.onBack()
													}else{
														uni.showToast({
															title:res3.data.msg,
															icon:'none',
															duration:1200
														})
													}
				
												}
											})
										}
									})
								}
							})
						} else {
							uni.showToast({
								title: '请升级微信版本'
							})
						}
					}
				})
			},
			// 请求用户协议
			getUserProtocol(){
				uni.request({
				    url:this.$Url +'/index.php/App/Single/UserAgreement',
				    method:'POST',
				    data:{
				       
				    },
				    success: (res) => {
				       if (res.data.status == 200) {
						   this.title = res.data.data.title
							this.protocol = res.data.data.content
				       } else{
							uni.showToast({
							    title:res.data.msg,
							    icon:'none',
							    duration:1200
							})
				       }
				    }
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.register{
	width: 100vw;
	min-height: 100vh;
	background-color: #ffff;
	padding-top: 100upx;

	.auth-box{
		width: 500upx;
		height: 500upx;
		border-radius: 20upx;
		padding: 30upx;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.box-top{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-bottom: 80upx;
			.box-title{
				color: $zhuti-color;
				font-size: 36upx;
				margin-bottom: 20upx;
			}
			.box-content{
				color: #333;
				font-size: 26upx;
			}
		}
		.button-box{
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			button{
				width: 180upx;
				height: 60upx;
				font-size: 22upx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
	
	.protoco-box{
		width: 600upx;
		position: relative;
		.title{
			position: absolute;
			top: 0;
			left: 0;
			height: 90upx;
			color: #333;
			font-size: 40upx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #fff;
			width: 100%;
		}
		.content{
			width: calc(100% - 60upx);
			height: 800upx;
			padding: 90upx 30upx 30upx 30upx;
		}
	}
	.register-plate-1{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #333;
		margin-bottom: 60upx;
		.logo{
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 100upx;
			image{
				width: 200upx;
			}
		}
		>image{
			width: 130upx;
			height: 130upx;
			border-radius: 50%;
			margin-bottom: 40upx;
		}
		text:first-child{
			font-size: 24upx;
			margin-bottom: 25upx;
		}
		text:last-child{
			font-size: 32upx;
			font-weight: 600;
		}
	}
	.register-plate-2{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		button{
			width: 80%;
			margin-bottom: 25upx;
			height: 90upx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		text{
			color: #666;
			font-size: 22upx;
		}
	}
}
</style>
